<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>练习4</title>
		<style type="text/css">
			body {
				font-size: 13px;
				line-height: 25px;
			}
			
			table {
				border-top: 1px solid #333;
				border-left: 1px solid #333;
				width: 300px;
			}
			
			td {
				border-right: 1px solid #333;
				border-bottom: 1px solid #333;
			}
			
			.center {
				text-align: center;
			}
		</style>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script>//219970838杨彪
			$(document).ready(function(){
				$("#b1").click(function(){
					var fRow = $("#row3");
					var newRow = "<tr>" 
							"<td>幸福从天而降</td>" 
							"<td align='center'>&yen;18.50</td>" +
							"</tr>";
					$(newRow).insertBefore(fRow);
				});
				
				$("#b2").click(function(){
					$("#row2").remove();
				});

				$("#b3").click(function(){
					$("#row1").css({
						"font-weight": "bold",
						"text-align": "center",
						"background-color": "#cccccc"
					});
				});

				$("#b4").click(function(){
					var oldRow = $("#row3");
					var newRow = oldRow.clone();
					newRow.attr("id", "row4");
					$("#myTable").append(newRow);
				});
			});
		</script>
	</head>

	<body>
		<table border="0" cellspacing="0" cellpadding="0" id="myTable">
			<tr id="row1">
				<td>书名</td>
				<td>价格</td>
			</tr>
			<tr id="row2">
				<td>看得见风景的房间</td>
				<td class="center">&yen;30.00</td>
			</tr>
			<tr id="row3">
				<td>60个瞬间</td>
				<td class="center">&yen;32.00</td>
			</tr>
		</table>
		<input id="b1" type="button" value="增加一行" />
		<input id="b2" type="button" value="删除第2行" />
		<input id="b3" type="button" value="修改标题样式" />
		<input id="b4" type="button" value="复制最后一行" />

	</body>

</html>
